<template>
  <!-- 队列修改记录列表 -->
  <section class="page">
    <data-box :data="dataSet" @onPageChange="refreshData">
      <template slot="columns">
        <el-table-column
          prop="createName"
          label="操作人"
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="操作时间"
          :formatter="(row) => $filter.dateTimeFormat(row.createTime)"
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="operation"
          label="变更类型"
          :formatter="(row) => $filter.dictConvert(row.operation, 'Operation')"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="queueStatus"
          label="审批状态"
          v-if="['SELF', 'OUTER', 'LAWSUIT', 'ROBOT'].includes(queueType)"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div v-if="scope.row.queueHistory.queueStatus===null">- - -</div>
            <div v-else> {{$filter.dictConvert(scope.row.queueHistory.queueStatus,'ApplyStatus')}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="channelStatus"
          v-else
          label="审批状态"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div v-if="scope.row.lightChannelHistory.channelStatus===null">- - -</div>
            <div v-else> {{$filter.dictConvert(scope.row.lightChannelHistory.channelStatus,'ApplyStatus')}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="isDistribute"
          label="操作内容"
          :formatter="(row) => $filter.dictConvert(row.isDistribute, 'State')"
          :min-width="$helper.getColumnWidth(3)"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="openDetail(scope.row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </template>
    </data-box>
    <div class="operate-buttons">
      <el-button @click="close">关闭</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Layout, Dependencies } from "~/core/decorator";
import { PageService } from "~/utils/page.service";

import { Prop, Emit } from "vue-property-decorator";
import { QueueLogService } from "~/services/domain-service/queue-log.service";
import { QueueService } from "~/services/domain-service/queue-manage.service";
import { QueueLightService } from "~/services/domain-service/queue-light.service";
@Layout("workspace")
@Component({
  components: {},
})
export default class QueueModifyLog extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(QueueService)
  private queueService: QueueService;
  @Dependencies(QueueLightService)
  private QueueLightService: QueueLightService;
  @Prop() private queueId;
  @Prop() private queueType;
  @Prop() private pithyFlag;
  private dataSet: any[] = [];
  private queueTableData: any = {};
  private QueueIds: any = {};
  @Emit("openDetail") private emitOpenDetail(queueTableData) {}
  @Emit("close") private close() {}

  private refreshData() {
    this.QueueIds = this.queueId;
    this.QueueIds =
      typeof this.QueueIds === "object" ? this.QueueIds.queueId : this.QueueIds;
    if (this.pithyFlag === true) {
      this.PithBtn(); // 轻渠道
    } else {
      this.NoPithBtn(); // 非轻渠道
    }
  }
  private NoPithBtn() {
    this.queueService
      .getAllQueueModifyLogs({ queueId: this.QueueIds }, this.pageService)
      .subscribe((data) => {
        this.dataSet = data;
      });
  }
  private PithBtn() {
    this.QueueLightService.getAllChannelHistory(
      { queueId: this.QueueIds },
      this.pageService
    ).subscribe((data) => {
      this.dataSet = data;
      data.map((item) => {
        item.createTime = item.timeCreated;
      });
    });
  }
  private openDetail(row) {
    this.refreshData();
    this.pithyFlag === true
      ? (this.queueTableData = row.lightChannelHistory)
      : (this.queueTableData = row.queueHistory);
    this.queueTableData.queueId = row.queueId;
    if (row.lightChannelHistory) {
      row.lightChannelHistory.remark !== ""
        ? (this.queueTableData.remarks = row.lightChannelHistory.remark)
        : (this.queueTableData.remarks = "");
    }
    this.pithyFlag === true ? (this.queueTableData.channelSetHistoryFlag = row.lightChannelHistory.channelSetHistory) : (this.queueTableData.channelSetHistoryFlag = [])
    this.queueTableData.expireMonthFlag = this.queueTableData.expireMonth
    this.queueTableData.expireDayFlag = this.queueTableData.expireDay
    this.queueTableData.expireDateFlag = this.queueTableData.expireDate
    
    console.log('this.queueTableData',this.queueTableData)
    this.emitOpenDetail(this.queueTableData);
  }
  private reset() {
    this.pageService.reset();
    this.refreshData();
  }
}
</script>

<style lang="less"></style>
